<template>
  <div>
    <!-- 抽奖 -->
    <div class="lottery">
      <div class="lotterydiv">
        <div class="lotteryh3">正在抽奖</div>
        <div class="lotteryclose"></div>
        <div class="lotterynum"></div>
        <div class="lotterytext">请牢记您的中奖码</div>
        <div class="lotterybox">
          <div class="lotterytext2">中奖者</div>
          <div class="lotteryname"></div>
        </div>
      </div>
      <div class="maskbg"></div>
    </div>
    <!-- 抽奖2.0 -->
    <div class="luckey-draw">
      <div class="luckey-drawdiv">
        <div class="tips-box tips-box-start" style="display: none">
          <p class="tips-title">提示</p>
          <div class="tips-content">
            <p class="tips-desc tips-start-desc">本次抽奖已取消</p>
          </div>
          <div class="tips-btn">
            <button class="tips-submit tips-start-submit">确定</button>
          </div>
        </div>
        <div class="luckey-drawing">
          <div class="luckey-drawing-h3"></div>
          <div class="luckey-drawing-close"></div>
        </div>
        <div class="luckey-draw-result">
          <div class="tips-box tips-box-end">
            <p class="tips-title"></p>
            <div class="tips-content">
              <p class="tips-desc tips-end-desc"></p>
            </div>
            <div class="tips-btn">
              <button class="tips-submit tips-end-submit">确定</button>
              <button class="tips-cancel">取消</button>
            </div>
          </div>
          <div class="luckey-draw-success">
            <p></p>
          </div>
          <div class="luckey-draw-error">
            <p></p>
          </div>
          <div class="luckey-draw-result-h3">抽奖结果</div>
          <div class="luckey-draw-result-close"></div>
          <div class="luckey-draw-content">
            <div class="win-prize-box">
              <p class="win-prize-tips">
                恭喜您获得了<span class="win-name"></span>,请牢记您的中奖码
              </p>
              <div class="win-prize-num"></div>
              <p class="cash-prize-tips">请在30分钟内输入以下信息，方便工作人员与您取得联系~</p>
              <div class="luckey-draw-info">
                <ul class="luckey-draw-info-list"></ul>
                <p class="submit-msg-tips"></p>
                <div class="luckey-draw-btn">提交</div>
              </div>
            </div>
            <div class="not-win-prize-box">
              <div class="not-win-prize">
                <img src="https://static.csslcloud.net/img/cry-face.png" />
              </div>
              <p class="not-win-prize-tips">很遗憾，您没有获得<span class="no-win-name"></span></p>
            </div>
            <div class="win-prize-wrap win-prize-min-height">
              <div class="winning-list-title">
                中奖名单<span class="winning-list-icon down"></span>
              </div>
              <ul class="win-prize-list"></ul>
            </div>
          </div>
        </div>
      </div>
      <div class="maskbg"></div>
    </div>
  </div>
</template>

<script>
const HDScene = window.liveHDScene
export default {
  methods: {
    addEvents() {
      // 开始抽奖
      var win = false,
        stop = false
      HDScene.onStartLottery({
        callback: () => {
          stop = false
          $('.lottery').show()
          $('.lotterybox').hide()
          if (win == true) {
            $('.lotteryh3').html('恭喜您中奖啦')
          } else {
            $('.lotteryh3').html('正在抽奖')
          }
        }
      })

      // 中奖
      HDScene.onWinLottery({
        callback: data => {
          var code = data.lotteryCode,
            name = data.viewerName
          if (data.viewerId == window.DWLive.viewerid) {
            $('.lotterynum').html(code)
            $('.lotterybox').hide()
            $('.lotterynum, .lotterytext, .lottery').show()
            $('.lotteryh3').html('恭喜您中奖啦')
            $('.lotterynum, .lotterytext').css('z-index', 9)
            win = true
          } else {
            $('.lotteryname').html(name)
            $('.lotterybox, .lottery').show()
            if (win == true) {
              $('.lotteryh3').html('恭喜您中奖啦')
            } else {
              $('.lotteryh3').html('哎呀，就差一点')
            }
            setTimeout(function() {
              $('.lotterybox').hide()
              if (win == true) {
                $('.lotteryh3').html('恭喜您中奖啦')
              } else {
                $('.lotteryh3').html('正在抽奖')
              }
            }, 3000)
          }
        }
      })

      $('.lotteryclose').click(function() {
        if (win == true) {
          if (stop == true) {
            $('.lottery').hide()
          }
          $('.lotterynum, .lotterytext').hide()
          $('.lotteryh3').html('正在抽奖')
          win = false
        } else {
          $('.lottery').hide()
        }
      })

      // 结束抽奖
      HDScene.onStopLottery({
        callback: () => {
          stop = true
          if (win == false) {
            setTimeout(function() {
              $('.lottery').hide()
            }, 3000)
          }
        }
      })

      var winPrizeTime
      var lotteryId
      HDScene.onLottery({
        callback: data => {
          console.log('onLottery-->', data)
          $('.luckey-draw').hide()
          $('.win-prize-box').hide()
          $('.luckey-draw-result').hide()
          $('.submit-msg-tips').hide()
          if (data.haveLottery) {
            // 有抽奖
            lotteryId = data.lotteryId
            if (data.lotteryStatus === 0) {
              // 抽奖ing
              $('.luckey-draw').show()
              $('.luckey-drawing').show()
            } else if (data.lotteryStatus === 1) {
              // 取消抽奖
              $('.luckey-draw').show()
              $('.luckey-drawing').hide()
              $('.tips-box-start').show()
            } else if (data.lotteryStatus === 2) {
              // 抽奖结束
              $('.luckey-draw-result').show()
              $('.luckey-drawing').hide()
              if (data.LotteryWinInfo.isWinner) {
                // 中奖
                winPrizeTime = new Date()
                luckeyCloseLock = true
                $('.luckey-draw').show()
                $('.win-prize-box').show()
                $('.not-win-prize-box').hide()
                $('.luckey-draw-result').show()
                $('.win-name').html(data.LotteryWinInfo.ownUserInfo.userName)
                $('.win-prize-num').html(data.LotteryWinInfo.ownUserInfo.prizeCode)
                if (data.LotteryWinInfo.LotteryCollectTemplate.length === 0) {
                  luckeyCloseLock = false
                  $('.luckey-draw-btn')
                    .hide()
                    .html('提交')
                  $('.cash-prize-tips').hide()
                } else {
                  $('.luckey-draw-btn')
                    .show()
                    .html('提交')
                  $('.cash-prize-tips').show()
                }
                var submmitHTML = data.LotteryWinInfo.LotteryCollectTemplate.map(function(
                  item,
                  index
                ) {
                  var itemHTML
                  if (index === 0) {
                    itemHTML =
                      '<li class="collect-list" collect-id="' +
                      item.index +
                      '"><label for="name">' +
                      item.title +
                      '</label><input  type="text" placeholder="请输入姓名"></li>'
                  } else if (index === 1) {
                    itemHTML =
                      '<li class="collect-list" collect-id="' +
                      item.index +
                      '"><label for="name">' +
                      item.title +
                      '</label><input  type="text" placeholder="请输入电话号码"></li>'
                  } else {
                    itemHTML =
                      '<li class="collect-list" collect-id="' +
                      item.index +
                      '"><label for="name">' +
                      item.title +
                      '</label><input  type="text" placeholder="' +
                      item.tips +
                      '"></li>'
                  }
                  return itemHTML
                }).join('')
                $('.luckey-draw-info-list').html(submmitHTML)
              } else {
                // 未中奖
                $('.luckey-draw').show()
                $('.win-prize-box').hide()
                $('.not-win-prize-box').show()
                $('.no-win-name').html(
                  '【' + HTMLEncode2(data.LotteryWinInfo.LotteryPrize.name) + '】'
                )
              }
              var userInfoHTML = data.LotteryWinInfo.LotteryUserInfo.map(function(item) {
                var itemHTML =
                  '<li> <div><img src="https://view.csslcloud.net/images/lottery-v2/normal.png"></div> <p>' +
                  item.userName +
                  '</p></li>'
                return itemHTML
              }).join('')
              $('.win-prize-list').html(userInfoHTML)
            }
          } else {
            // 没有抽奖，隐藏抽奖相关
            $('#luckey-draw').hide()
          }
        }
      })

      // v2.0中奖提交用户信息
      $('.luckey-draw-btn').click(function() {
        var collectList = $('.luckey-draw-info-list li')
        var collectData = []
        for (var i = 0; i < collectList.length; i++) {
          var collectIndex = collectList.eq(i).attr('collect-id')
          var collectValue = collectList
            .eq(i)
            .find('input')
            .val()
          collectData.push({
            index: collectIndex * 1,
            value: collectValue
          })
        }
        var collectBody = {
          lotteryId: lotteryId,
          collectInfos: collectData
        }
        var nowTime = new Date()
        var reduceTime = nowTime - winPrizeTime
        if (reduceTime > 1800000) {
          $('.luckey-draw-success').hide()
          $('.luckey-draw-error').show()
          $('.luckey-draw-error p').html('已超过提交时间，提交失败') //已超过提交时间，提交失败
          luckeyCloseLock = false
          setTimeout(function() {
            $('.luckey-draw-error').hide()
          }, 1000)
        } else {
          // 提交抽奖信息
          HDScene.commitLottery(collectBody, {
            success: reuslt => {
              $('.luckey-draw').hide()
              console.log('commitLottery:: reuslt', reuslt)
            },
            error: err => {
              $('.submit-msg-tips').show()
              $('.submit-msg-tips').html(err)
              console.log('commitLottery:: err', err)
            }
          })
        }
      })

      // 中奖名单
      var isWinPrize = false
      $('.winning-list-title').click(function() {
        isWinPrize = !isWinPrize
        if (isWinPrize) {
          //展开
          $('.winning-list-icon').removeClass('down')
          $('.winning-list-icon').addClass('up')
          $('.win-prize-wrap').removeClass('win-prize-min-height')
        } else {
          //收起
          $('.winning-list-icon').removeClass('up')
          $('.winning-list-icon').addClass('down')
          $('.win-prize-wrap').addClass('win-prize-min-height')
        }
      })

      //抽奖结果关闭
      var luckeyCloseLock = false //点击关闭提示弹窗
      $('.luckey-draw-result-close').click(function() {
        if (luckeyCloseLock) {
          //展示弹窗
          $('.tips-box-end').show()
          $('.tips-end-desc').html('您还没有提交信息，确定要关闭么？') //您还没有提交信息，确定要关闭么？
          $('.tips-cancel').show()
        } else {
          //不展示弹窗
          $('.luckey-draw').hide()
        }
      })
      //抽奖中关闭
      $('.luckey-drawing-close').click(function() {
        $('.luckey-draw').hide()
      })

      //抽奖中提示弹窗确定按钮
      $('.tips-start-submit').click(function() {
        $('.tips-box-start').hide()
        $('.luckey-draw').hide()
      })
      //抽奖提示弹窗确定按钮
      $('.tips-end-submit').click(function() {
        $('.tips-box-end').hide()
        $('.luckey-draw').hide()
      })
      //抽奖提示弹窗取消按钮
      $('.tips-cancel').click(function() {
        $('.tips-box-end').hide()
      })

      function HTMLEncode2(html) {
        var temp = document.createElement('div')
        temp.textContent != null ? (temp.textContent = html) : (temp.innerText = html)
        var output = temp.innerHTML
        temp = null
        return output
      }

      $('.luckey-drawing-close').on('click', function() {
        $('#luckey-draw').hide()
        $('#luckey-drawing').hide()
      })
    }
  },
  mounted() {
    this.addEvents()
  }
}
</script>

<style lang="scss">
@import './lottery.scss';
</style>
